<template>
  <el-row class="rowNavStyle">
    <el-col :span="24" class="colNavStyle">
      <menuButton
        @addSystemKey="addClick"
        @closeSystemKey="batchCloseClick"
        @enableSystemKey="batchEnableClick"
        helper-path="pages/d8f479"
      ></menuButton>
    </el-col>
  </el-row>

  <el-table
    :data="tableData"
    stripe
    :border="true"
    @selection-change="SelectionChange"
    row-key="systemKey"
    default-expand-all
    v-loading="loading"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      prop="systemName"
      label="系统名称"
      width="300"
      show-overflow-tooltip
    />
    <el-table-column
      prop="corporationName"
      label="所属公司"
      width="300"
      show-overflow-tooltip
    />
    <el-table-column prop="remark" label="备注" show-overflow-tooltip />
    <el-table-column prop="isOpen" label="是否使用" align="center" width="100">
      <template #default="model">
        <el-switch
          :before-change="switchClick"
          v-model="model.row.isOpen"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="开启中"
          inactive-text="关闭中"
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="userName"
      label="创建用户"
      align="center"
      width="150"
    />
    <el-table-column
      prop="createTime"
      label="创建时间"
      align="center"
      width="150"
    />
    <el-table-column label="操作" align="center" width="100">
      <template #default="scope">
        <!-- <el-button
          size="small"
          icon="Edit"
          plain
          type="primary"
          @click="handleEdit(scope.row)"
        >
          编辑
        </el-button> -->
        <dataRowButton
          :model="scope.row"
          @editSystemKey="handleEdit(scope.row)"
        ></dataRowButton>
        
      </template>
    </el-table-column>
  </el-table>

  <addOrEdit
    :isVisibles="isVisibles"
    :modelData="sysSystem"
    :dialogTitle="dialogTitle"
    @closeBnt="colosClick"
  ></addOrEdit>
</template>
  <script lang="ts" setup>
import { SysSystem, SysSystemOutPut } from "@/model/system/system";
import { getSystemList, SetSystemIsOpen } from "@/api/system";
import { onMounted, reactive, ref } from "vue";
import addOrEdit from "../system/addOrEdit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { UpdateIsOpenInPut } from "@/model/public/public";
import menuButton from "@/components/menuButton.vue";
import dataRowButton from "@/components/dataRowButton.vue";
//初始加载dom
onMounted(() => {
  getSystemMsg();
});
//加载状态
const loading = ref(true);
//控制弹出层显隐
const isVisibles = ref<boolean>(false);
//弹出层标题
const dialogTitle = ref<string>();
// 选中项
const selectedRows = ref<SysSystemOutPut[]>([]);
//系统模型数据
const sysSystem = reactive<SysSystem>({
  SystemName: "",
  SystemCode: "",
  IsOpen: true,
  Remark: "",
  SystemKey: "",
  CorporationKey: "",
});
//设置系统是否启用输入模型
const updateIsOpenInPut = reactive<UpdateIsOpenInPut>({
  Keys: [],
  IsOpen: false,
});

//table数据
const tableData = ref<SysSystemOutPut[]>([]);

//获取table数据
const getSystemMsg = () => {
  getSystemList()
    .then(({ data, code }) => {
      if (code === 200) {
        tableData.value = data;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

//复选框事件
const SelectionChange = (val: SysSystemOutPut[]) => {
  selectedRows.value = val;
};

//新增
const addClick = function () {
  const model = ref<SysSystemOutPut[]>([]);
  addOrEditMethod(model.value[0], true);
};

//行编辑事件
const handleEdit = function (model: SysSystemOutPut) {
  addOrEditMethod(model, false);
};

//新增或编辑方法
const addOrEditMethod = function (model: SysSystemOutPut, isAdd: boolean) {
  if (isAdd) {
    sysSystem.SystemCode = "";
    sysSystem.CorporationKey = "";
    sysSystem.SystemKey = "";
    sysSystem.SystemName = "";
    sysSystem.Remark = "";
    sysSystem.IsOpen = true;
  } else {
    sysSystem.SystemCode = model.systemCode;
    sysSystem.CorporationKey = model.corporationKey;
    sysSystem.SystemKey = model.systemKey;
    sysSystem.SystemName = model.systemName;
    sysSystem.Remark = model.remark;
    sysSystem.IsOpen = model.isOpen;
  }
  dialogTitle.value = isAdd ? "新增系统" : "编辑系统";
  isVisibles.value = true;
};

//批量关闭
const batchCloseClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行操作",
      type: "warning",
    });
  } else {
    setIsOpen(false);
    updateIsOpenInPut.Keys = selectedRows.value.map((f) => f.systemKey);
    updateIsOpenInPut.IsOpen = false;
  }
};

//批量启用
const batchEnableClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行操作",
      type: "warning",
    });
  } else {
    setIsOpen(true);
    updateIsOpenInPut.Keys = selectedRows.value.map((f) => f.systemKey);
    updateIsOpenInPut.IsOpen = true;
  }
};

//设置系统启用状态
const setIsOpen = function (isOpen: boolean) {
  var title = isOpen
    ? "你确认要开启选中系统，开启后系统的一切功能都将启用？"
    : "你确认要关闭选中系统，关闭后系统的一切功能都将停用！";
  ElMessageBox.confirm(title, "提示消息", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      SetSystemIsOpen(updateIsOpenInPut).then(({ data, code, msg }) => {
        if (code == 200) {
          getSystemMsg();
          ElMessage({
            message: msg,
            type: "success",
          });
        }
      });
    })
    .catch(() => {
      //取消
    });
};

//关闭弹出层
const colosClick = function () {
  getSystemMsg();
  isVisibles.value = false;
};
//禁止点页面的滑块
const switchClick = function () {
  return new Promise((_, reject) => {
    return reject(new Error("Error"));
  });
};
</script>
  <style scoped>
.rowStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
}
.colStyle {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
}
</style>